<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta name="Description" content="页面描述" />
	<meta name="Keywords" content="页面关键字" />
	<meta name="viewport" content="width=640,minimum-scale=0,maximum-scale=4,user-scalable=no">
	<script>
		if (navigator.appVersion.indexOf('Android') != -1) {
			document.addEventListener("DOMContentLoaded", function (e) {
				document.querySelector('body').style.zoom = e.target.activeElement.clientWidth / 640;
			});
		}
	</script>
	<title>商城首页</title>
	<link href="css/common.css" rel="stylesheet">
</head>
<body>
	<div class="area-select-wrap">
		<div class="area-select c">
			<div class="area-select-info bb c">
				<a href="javascript:;">长沙 </a>
				<a href="javascript:;">手动选择 </a>
			</div>
			<ul>
				<li><a href="javascript:">北京</a></li>
				<li><a href="javascript:">上海</a></li>
				<li><a href="javascript:">长沙</a></li>
				<li><a href="javascript:">广州</a></li>
				<li><a href="javascript:">深圳</a></li>
			</ul>
		</div>
	</div>
	<div class="mall">
		<section class="banner">
			<div class="banner-top">
				<div class="banner-area-name fl">长沙</div>
				<input placeholder="找什么呢？" class="banner-soso fl" />
				<a href="扫码支付生成订单页面.html" class="banner-soso-submit fr">搜索</a>
			</div>
			<img src="images/index_banner.jpg" width="100%" />
		</section>
		<section class="sort c bb mt">
			<ul>
				<li>
					<a href="商城_商家列表展示页面.html">
						<img src="images/icon/餐饮.png" width="92" height="92" alt="餐饮" />
						<p>餐饮</p>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="images/icon/it.png" width="92" height="92" alt="休闲" />
						<p>IT</p>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="images/icon/超市.png" width="92" height="92" alt="娱乐" />
						<p>超市</p>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="images/icon/美容.png" width="92" height="92" alt="健康" />
						<p>健康美容</p>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="images/icon/家装.png" width="92" height="92" alt="活动" />
						<p>家装</p>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="images/icon/培训.png" width="92" height="92" alt="餐饮" />
						<p>培训</p>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="images/icon/企业服务.png" width="92" height="92" alt="餐饮" />
						<p>企业服务</p>
					</a>
				</li>
				<li>
					<a href="商城分类页面.html">
						<img src="images/more.png" width="92" height="92" alt="更多" />
						<p>更多</p>
					</a>
				</li>
			</ul>
		</section>
		<section class="mt">
			<div class="mall-sort-title c bt">
				<span class="fl">餐饮</span>
				<a href="商城_商家列表展示页面.html" class="fr co2">更多</a>
			</div>
			<a href="javascript:;"><img src="images/style/分类图-餐饮.jpg" width="100%" /></a>
			<div class="mall-list c">
				<ul>
					<li>
						<a href="商城_商家列表_商家详情无产品商家页面.html">
							<img src="images/logo/力力渔港.jpg" width="300" height="248" />
							<p class="mall-list-link">力力渔港</p>
							<p class="mall-list-pref co1">会员8.8折</p>
							<p class="co2">免费提供酒水、饮料</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="11" width="300" height="248" />
							<p class="mall-list-link">鼎鼎湘滋味</p>
							<p class="mall-list-pref co1">会员8.8折</p>
							<p class="co2">预制菜</p>
						</a>
					</li>
				</ul>
			</div>
		</section>
		<section class="mt">
			<div class="mall-sort-title c bt">
				<span class="fl">超市</span>
				<a href="javascript:;" class="fr co2">更多</a>
			</div>
			<a href="javascript:;"><img src="images/style/分类图-购物.jpg" width="100%" /></a>
			<div class="mall-list c">
				<ul>
					<li>
						<a href="商城_商家列表_商家详情有产品商家页面.html">
							<img src="images/logo/精彩飞扬红食品.jpg" width="300" height="248" />
							<p class="mall-list-link">精彩飞扬红食品</p>
							<p class="mall-list-pref co1">会员8.8折</p>
							<p class="co2">红枣，各类坚果，端午节礼品...</p>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img src="11" width="300" height="248" />
							<p class="mall-list-link">玮中生物</p>
							<p class="mall-list-pref co1">会员8.8折</p>
							<p class="co2">富硒大米，鸡蛋，葡萄酒，富硒...</p>
						</a>
					</li>
				</ul>
			</div>
		</section>
		<section class="mt">
			<div class="mall-sort-title c bt">
				<span class="fl">IT</span>
				<a href="javascript:;" class="fr co2">更多</a>
			</div>
			<a href="javascript:;"><img src="images/style/分类图-it.jpg" width="100%" /></a>
			<div class="mall-list c">
				<ul>
					<li>
						<a href="javascript:;">
							<img src="11" width="300" height="248" />
							<p class="mall-list-link">德沐数码科技</p>
							<p class="mall-list-pref co1">会员8.8折</p>
							<p class="co2">网站开发，教育与医疗软件系统...</p>
						</a>
					</li>
				</ul>
			</div>
		</section>
	</div>
</body>
<script src="js/zepto.min.js"></script>
<script>
	var areaMo = {
			areaName : $('.banner-area-name'),
			bannerTop : $('.banner-top'),
			areaSelectWrap : $('.area-select-wrap'),
			areaSelect : $('.area-select'),
			into : function(e){
				var tun = true;
				areaMo.areaName.on('touchstart',function(){
					areaMo.areaToggle();
				})
				areaMo.areaSelect.on('touchstart',function(){
					tun = false
				})
				areaMo.areaSelect.find('li').on('touchstart',function(){
					var thisText = $(this).text();
					areaMo.areaName.text(thisText);
					areaMo.areaToggle();
				})
				areaMo.areaSelectWrap.on('touchstart',function(){
					if(!tun){tun = true;return}
					areaMo.areaToggle();
				})
			},
			areaToggle : function(){
				areaMo.bannerTop.toggleClass('banner-in');
				areaMo.areaSelectWrap.toggle()
			}
		}
	areaMo.into();
	//areaMo.areaToggle(); 选择地区显示或者隐藏的切换
</script>
</html>